<template lang="">
    <div>
        <el-row :gutter="5">
            <el-col :span="4">
                <el-select v-model="searchType" placeholder="请选择" @change="searchTypeChange">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-col>
            <el-col :span="20">
                <el-form ref="form" :model="form" label-width="80px">
                    <el-row :gutter="20">
                        <el-col :span="12" v-show="searchType == 'ID'">
                            <el-form-item label="题目ID:">
                                <el-input v-model.number="form.id" @keyup.enter.native="searchById"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" v-show="searchType == 'title'">
                            <el-form-item label="题目:">
                                <el-input v-model="form.queQue" @keyup.enter.native="toSearch"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" v-show="searchType == 'type'">
                            <el-form-item label="题型:">
                                <el-select v-model="form.queType" placeholder="请选择" clearable @change="toSearch"
                                    @clear="clear">
                                    <el-option v-for="(item,index) in queTypes" :key="index" :label="item.label" :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6" v-show="!(searchType == 'type')">
                            <el-button type="primary" round icon="el-icon-search" @click="toSearch">开始查找</el-button>
                            <el-button type="danger" round icon="el-icon-close" @click="clear">清空</el-button>
                        </el-col>
                    </el-row>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template>
<script>
    export default {
        name: 'Search',
        data() {
            return {
                form: {
                    id: '',
                    queQue: '',
                    queType: '',
                },
                start:1,
                searchType: 'title',
                options: [
                    {
                        label: '按题目查找',
                        value: 'title'
                    },
                    {
                        label: '按ID查找',
                        value: 'ID'
                    },
                    {
                        label: '按题型查找',
                        value: 'type'
                    },
                ],
                queTypes:[{
                    label:'单选',
                    value:0
                },{
                    label:'多选',
                    value:1
                },{
                    label:'单行填空',
                    value:2
                },{
                    label:'多行填空',
                    value:3
                },{
                    label:'下拉框',
                    value:4
                }]
            }
        },
        methods: {
            toSearch(val) {     //在搜索类型为title时是点击事件，为type时是value，其他情况是页码
                let page = val // ↑ 因此先接住
                if (this.searchType == 'ID') {      //如果搜索项为以ID搜索，则重新定向至toSearchById
                    this.searchById()
                    return false
                }else if(this.searchType == 'title'){
                    if(typeof(val) == 'object'){
                        page = 1
                    }
                    this.searchByTitle(page)
                    return false
                }else if(this.searchType == 'type'){
                    console.log('按题型搜索');
                    this.searchByType(this.start)
                    return false
                }
            },
            searchByType(val) {
                let notNum = /\D/
                let type = this.form.queType
                let page = val
                axios({
                    method: 'GET',
                    url: '/questionBank/getQuestionByType',
                    withCredentials: true,
                    params: {
                        pageSize: 16,
                        start: page,            //page需要改
                        type: type
                    },
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }).then((result) => {
                    let data = result.data.data.list
                    this.$bus.$emit('search', data)
                    this.$bus.$emit('totalPage', data.total)
                }).catch((err) => {
                    this.$message({
                        message: err.message,
                        type: 'info'
                    })
                });
            },
            searchByTitle(page) {
                axios({
                    method: 'GET',
                    url: '/questionBank/getQuestionByTitle',
                    withCredentials: true,
                    params: {
                        pageSize: 16,
                        start: page,
                        title: this.form.queQue
                    },
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }).then((result) => {
                    let data = result.data.data.list
                    this.$bus.$emit('search', data)
                    this.$bus.$emit('totalPage', data.total)
                }).catch((err) => {
                    this.$message({
                        message: err.message,
                        type: 'info'
                    })
                });
            },
            searchById() {
                let isNum = /\d/
                if (isNum.test(this.form.id)) {
                    axios({
                        method: 'GET',
                        url: '/questionBank/getQuestionById',
                        withCredentials: true,
                        params: {
                            id: this.form.id
                        },
                        headers: {
                            'Content-Type': 'application/json'
                        }
                    }).then((result) => {
                        let data = result.data.data
                        this.$bus.$emit('search', [data])
                        if (data.id) {
                            this.$bus.$emit('totalPage', 1)
                        } else {
                            this.$bus.$emit('totalPage', 0)
                        }
                    }).catch((err) => {
                        this.$message({
                            message: err.message,
                            type: 'info'
                        })
                    });
                } else {
                    this.$message({
                        message: '请输入正确的题目ID',
                        type: 'warning'
                    })
                }
            },
            searchTypeChange() {            //格式化搜索框
                this.form = {
                    id: '',
                    queQue: '',
                    queType : ''
                }
            },
            clear() {
                this.searchTypeChange()
                this.$bus.$emit('clearSearch')
            },
        },
        mounted() {
            this.$bus.$on('pageChangeSearching', (val) => {
                this.start = val
                this.toSearch(val)
            })
        },
        beforeDestroy() {
            this.$bus.$off('pageChangeSearching')
        },
    }
</script>
<style lang="">

</style>